<template>
  <pub-edit-description-item :span="1" label="证件类型" required>
    <el-form-item prop="cardTypeCode" :rules="$formRules.input">
      <pub-select-dict
        :disabled="props.disabled"
        width="100%"
        v-model="cardTypeCode"
        dict-code="ZJLX"
        placehoder="请选择"
        @change="cardTypeChange"
      ></pub-select-dict>
    </el-form-item>
  </pub-edit-description-item>
  <pub-edit-description-item :span="1" label="证件号码" required>
    <el-form-item
      prop="idCard"
      :rules="
        cardTypeCode === '01'
          ? $formRules.idCard
          : [{ required: true, message: '请输入' }]
      "
    >
      <pub-input
        v-model="idCard"
        @change="changeIdCard"
        :formatter="idCardFormat"
        :parser="idCardFormat"
        :disabled="props.disabled"
      />
    </el-form-item>
  </pub-edit-description-item>
  <pub-edit-description-item :span="1" label="性别" required>
    <el-form-item prop="sexCode" :rules="$formRules.select">
      <pub-select-dict
        :disabled="props.disabled ? true : disabled"
        width="100%"
        v-model="sexCode"
        dict-code="XB"
        placehoder="请选择"
      ></pub-select-dict>
    </el-form-item>
  </pub-edit-description-item>
  <pub-edit-description-item :span="1" label="出生日期" required>
    <el-form-item prop="birthDate" :rules="$formRules.select">
      <pub-select-date
        :clearable="false"
        v-model="birthDate"
        :disabled="props.disabled ? true : disabled"
        valueFormat="YYYY-MM-DD"
      ></pub-select-date>
    </el-form-item>
  </pub-edit-description-item>
  <pub-edit-description-item :span="1" label="年龄" required>
    <el-form-item prop="age" :rules="$formRules.input">
      <pub-input :disabled="props.disabled ? true : disabled" v-model="age" />
    </el-form-item>
  </pub-edit-description-item>
</template>
<script setup>
import { useVModels } from '@vueuse/core'
import { calAgeAndSexByIdCard, validateIdCardMethods } from '@/utils'
const props = defineProps({
  cardTypeCode: String,
  idCard: String,
  age: Number,
  birthDate: String,
  sexCode: String,
  disabled: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits([
  'update:cardTypeCode',
  'update:idCard',
  'update:age',
  'update:birthDate',
  'update:sexCode',
  'confirm'
])
const { cardTypeCode, idCard, age, birthDate, sexCode } = useVModels(
  props,
  emit
)
const disabled = ref(false)
const cardTypeChange = val => {
  if (val.code === '01' && validateIdCardMethods(idCard.value) === true) {
    sexCode.value = calAgeAndSexByIdCard(idCard.value, 2)
    birthDate.value = calAgeAndSexByIdCard(idCard.value, 1)
    age.value = calAgeAndSexByIdCard(idCard.value, 3)
  }
  // emit('confirm')
}
watch(
  () => cardTypeCode.value,
  val => {
    if (val === '01') {
      disabled.value = true
      if (validateIdCardMethods(idCard.value) === true) {
        idCard.value = `${idCard.value}`.replace(/x/g, 'X')
      }
    } else {
      disabled.value = false
    }
  }
)
const changeIdCard = async val => {
  if (validateIdCardMethods(val) === true) {
    idCard.value = `${val}`.replace(/x/g, 'X')
    sexCode.value = calAgeAndSexByIdCard(val, 2)
    birthDate.value = calAgeAndSexByIdCard(val, 1)
    age.value = calAgeAndSexByIdCard(val, 3)
    
    emit('confirm')
  }
}
const idCardFormat = val => {
  if(validateIdCardMethods(val) === true)  return  `${val}`.replace(/x/g, 'X')
  else return val
}
</script>
<style lang="scss" scoped></style>
